import React, { Component } from 'react';     
import { Form,Row,Col,Button,Input,Modal, message,} from 'antd';
import './data-config.css';
import SelectCurveForm from '../Modal/select-curvesDown-form';
import SelectCurveUpForm from '../Modal/select-curvesUp-form';
import {reqCurvesSplice} from '../../api';
import { connect } from 'react-redux';
import {replaceNewCurves,isUpdatePages} from '../../redux/actions';   



class ConcatCurveForm extends Component {  
  state = {
    curve1: '',  
    curveId2: '', 
    curveName1: '',  
    curveName2: '',    
    visible: '0'
  };

  onFinish1 = async(values) => {   // 提交表单： 拼接
    const {curve1,curve2} = this.state;
    if(curve1.curve_id !== '' && curve1.curve_id !== ''){
      const spliceDepth = Number(values.splice_depth);
      console.log("拼接参数",curve1,curve2,spliceDepth);   
      const result = await reqCurvesSplice(curve1,curve2,spliceDepth);  // 获取拼接后的曲线
      console.log("拼接结果",result);
      if(result.code === 200){  
        this.props.replaceNewCurves(result.data);
      }else{
        message.error("拼接失败！");
      }  
    }else{
      message.error("请选择拼接曲线！");
    }
  };
  
  openFileShow1 = () => {    // 选择上曲线 弹框显示
    this.setState({
      visible: '1'
    });
  };
  handleOpenFile1 = async() => {    // 选择上曲线 响应函数 
    this.setState({ visible: '0'});
    const curve1 = this.curve1; 
    //console.log("上曲线信息",curve1)   
    this.setState({ 
      curve1
    }) 
  }; 

  openFileShow2 = () => {    // 选择下曲线 弹框显示
    this.setState({
      visible: '2'
    });
  };
  handleOpenFile2 = async() => {    // 选择下曲线 响应函数 
    this.setState({ visible: '0'});
    const curve2 = this.curve2; 
    //console.log("下曲线信息",curve2)   
    this.setState({ 
      curve2
    }) 
  }; 
  
  handleCancel = () => {    // 对话框取消按钮
    this.setState({
      visible: '0'
    }); 
  };


  render() {
    const { visible} = this.state;
    const curveName1 = this.curve1 ? this.curve1.curve_name || '' : '';
    const curveName2 = this.curve2 ? this.curve2.curve_name || '' : '';
    const docName1 = this.doc1 ? this.doc1.doc_name : '';
    const docName2 = this.doc2 ? this.doc2.doc_name : '';
    return (
      <div className='pre-process-sider-down' >
        <Form
         ref={this.formRef}
         onFinish={this.onFinish1}
         >
          <div className='inputfile'>
            <Row>
              <Col style={{width:70,lineHeight: '32px'}}>上&nbsp;曲&nbsp;线&nbsp;：</Col>
              <Col>
                <Form.Item 
                  name='curve_up' 
                >
                  {console.log("上曲线",docName1,curveName1)}
                  <Input className="data-pre-process-input" id="input1" value={docName1+'/'+curveName1} style={{width:'112px',height:'28px'}} readonly />
                </Form.Item> 
              </Col>
              <Col>
                <Form.Item>
                  <Button className="data-pre-process-button"  type="primary" onClick={this.openFileShow1}>
                    选择
                  </Button>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col style={{width:70,lineHeight: '32px'}}>下&nbsp;曲&nbsp;线&nbsp;：</Col>
              <Col>
                <Form.Item 
                  name='curve_down' 
                >
                  {console.log("下曲线",docName2,curveName2)}
                  <Input className="data-pre-process-input" id="input2" value={docName2+'/'+curveName2} style={{width:'112px',height:'28px'}} readonly />
                </Form.Item> 
              </Col>
              <Col>
                <Form.Item>
                  <Button className="data-pre-process-button" type="primary" onClick={this.openFileShow2}>
                    选择
                  </Button>
                </Form.Item>
              </Col>
            </Row>
          </div>
          <Row>
              <Col style={{width:70,lineHeight: '32px'}}>深 度(米)：</Col>
              <Col>
                <Form.Item 
                  className="depth-form" 
                  name="splice_depth" 
                  rules={[
                    {
                      required: true,
                      pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g,  // pattern正则表达式匹配
                      message: '请输入数字',  
                    }]}
                >
                  <Input className="depth-input data-pre-process-input" style={{width:'112px',height:'28px'}}/>
                </Form.Item> 
              </Col>
              <Col>
                <Form.Item>
                  <Button className="data-pre-process-button" type="primary" htmlType="submit">
                    确定
                  </Button>
                </Form.Item>
              </Col>
          </Row> 
        </Form>

        <Modal
          title="选择上曲线"
          visible={visible === '1'}
          onOk={this.handleOpenFile1}
          onCancel={this.handleCancel}
          destroyOnClose={true}  // 关闭时销毁子元素
          okText="确定"
          cancelText="取消"
        >
          <SelectCurveUpForm setForm = {(formRef) => {this.formRef = formRef}} setCurve = {(curve) => {this.curve1 = curve}} setDoc={(doc) => {this.doc1 = doc}} /> 
        </Modal>

        <Modal
          title="选择下曲线"
          visible={visible === '2'}
          onOk={this.handleOpenFile2}
          onCancel={this.handleCancel}
          destroyOnClose={true}  // 关闭时销毁子元素
          okText="确定"
          cancelText="取消"
        >
          <SelectCurveForm setForm = {(formRef) => {this.formRef = formRef}} setCurve = {(curve) => {this.curve2 = curve}} setDoc={(doc) => {this.doc2 = doc}} /> 
        </Modal>
    </div>
    );
  }
}

export default  connect(
  state => ({selectedCurves: state.selectedCurves, docData: state.docData, updatePages: state.updatePages}),
  {replaceNewCurves,isUpdatePages}
)(ConcatCurveForm);